<script setup lang="ts">
import { setup } from "@/utils/setup.js";
import {
  NButton,
  NCard,
  NInput,
  NInputGroup,
  NInputGroupLabel,
  NP,
  NSpace,
} from "naive-ui";
import { ref } from "vue";

const { masterStore } = setup();

const url = ref("");

function writeToClipboard() {
  navigator.clipboard.writeText(masterStore.resource(url.value));
}
</script>

<template>
  <NSpace style="margin: 16px" :size="'large'" vertical>
    <NCard size="small" title="资源">
      <NP>通过 OhMyDev 来加速下载资源。</NP>
      <NInputGroup>
        <NInputGroupLabel>链接</NInputGroupLabel>
        <NInput v-model:value="url" />
        <NButton @click="writeToClipboard()">复制</NButton>
        <NButton tag="a" :href="masterStore.resource(url)" target="_blank">
          下载
        </NButton>
      </NInputGroup>
    </NCard>
  </NSpace>
</template>
